import Qt 4.7

Item {
    id: container

    signal returnTo

    width: parent.width
    height: parent.height

    function showEventDetail(index) {
		eventDetailUI.setEventInfo(index);
        container.state = "eventDetail";
    }

	function showEventsList() {
        container.state = "eventsList";
	}

    Component {
        id: eventsListDelegate

        Item {
            id: wrapper
            //width: wrapper.ListView.view.width
            width: parent.width
            height: text.height + 16
            anchors.topMargin: 8
            anchors.bottomMargin: 8

            function summary() {
                var str = "<font size=\"+2\">" + Name + "</font><br>"
                            + GroupName + "<br>" + EventDate;

                if (VenueName != null && VenueName != "") {
                    str += " at " + VenueName + " in " + City + ", " + StateName
                }

                text.text = str;
            }

            Item {
                id: simpleItem
                height: parent.height

                Text {
                    id: text

                    text: summary();
                    width: container.width
                    color: "white"
                    font.pointSize: fontSize
                    wrapMode: Text.Wrap

                    MouseArea {
                        anchors.fill: parent
                        onClicked: { showEventDetail(index); }
                    }

                }
            }
        }
    }

    // main list view
    Item {
        id: eventsListUI
        width: parent.width
        height: parent.height
        x: 0
        y: 0

        // background
        Rectangle {
            color: "#000044"
            anchors.fill: parent
        }

        // tool buttons
        Item {
            id: toolButtons
            width: parent.width
            height: 48
            anchors.top: parent.top

            Button {
                id: btnUpdate
                text: "Update"
                anchors.right: btnReturn.left
                anchors.leftMargin: -110
                y: 0
                width: 100
                height: 48
                onClicked: { eventsListModel.update() }
            }

            Button {
                id: btnReturn
                text: "Return"
                anchors.right: parent.right
                y: 0
                width: 100
                height: 48
                onClicked: { container.returnTo() }
            }
        }

		ScrollBar {
			id: scrollbar
			scrollArea: eventsListView
			width: 4
			height: parent.height - toolButtons.height
			anchors.top: toolButtons.bottom
			anchors.right: parent.right
			clip: true
		}

        // list area
        Item {
            width: parent.width - scrollbar.width
            height: parent.height - toolButtons.height
            anchors.top: toolButtons.bottom
            anchors.right: scrollbar.left
            anchors.left: parent.left

            ListView {
                id: eventsListView
                //anchors.fill: parent

                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: parent.width
                height: parent.height

                model:  eventsListModel
                delegate: eventsListDelegate
                cacheBuffer: 1000
                clip: true
            }
        }
    }

	// child event detail
    EventDetail {
        id: eventDetailUI
		width: parent.width
		height: parent.height
		x: parent.width * 1.5
		y: 0
		onReturnTo: { showEventsList() }
    }


    states: [
        State {
            name: "eventsList"
            PropertyChanges {
                target: eventsListUI
                x: 0
            }
            PropertyChanges {
                target: eventDetailUI
                x: parent.width * 1.5
            }
        },
        State {
            name: "eventDetail"
            PropertyChanges {
                target: eventsListUI
                x: -parent.width * 1.5
            }
            PropertyChanges {
                target: eventDetailUI
                x: 0
            }
        }

    ]

    transitions: [
        Transition {
            NumberAnimation {
                properties: "x,y,opacity";
                duration: 200
            }
        }
    ]
}
